<template>
	<van-grid square :gutter="10" style="margin-top:10px" icon-size="50">
		<van-grid-item
			:to="`detail/${item.id}`"
			v-for="item in data.list"
			:key="item.id"
			:icon="item.src"
		>
			<div slot="text" class="slotText">
				<p class="text">{{item.label}}</p>
				<p>￥{{item.money}} {{item.dir}}</p>
			</div>
		</van-grid-item>
	</van-grid>
</template>

<script>
export default {
	name: 'hot',
	props: {
		data: {
			// type类型为对象或数组的时候，default必须是一个函数
			type: Object,
			default: () => {
				return {
					list: []
				}
			}
		}
	}
}
</script>

<style scoped>
.text {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	width: 81px;
}
.slotText {
	color: #7d7e80;
	font-size: 12px;
}
</style>
